<template>
  <div class="app-container">
    <div class="Search">
      <!--工具条-->
      <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
        <el-form :inline="true" :model="query">
          <!--    <el-form-item>
            <el-input v-model="query.params.deviceTypeName" placeholder="类型名称" />
          </el-form-item>
          <el-form-item>
            <el-input v-model="query.params.deviceTypeCode" placeholder="类型编码" />
          </el-form-item> -->
          <el-form-item>
            <SelectTree placeholder="所属组织" :props="organProps" :options="organOptionData" :clearable="isClearable" :accordion="isAccordion" @getValue="getValueIdSelectOrgan($event)" />
          </el-form-item>
          <!--      <el-form-item>
            <el-input v-model="query.params.organId" placeholder="所属组织" />
          </el-form-item>
          <el-form-item>
            <el-input v-model="query.params.organPath" placeholder="所属组织路径" />
          </el-form-item> -->
          <el-form-item>
            <SelectTree placeholder="设备类型" :props="props" :options="optionData" :clearable="isClearable" :accordion="isAccordion" @getValue="getValueSelect($event)" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="fetchData">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button v-has="'DEVICE_TYPE_ADD'" type="success" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </div>
    <div class="block">
      <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row row-key="id">
        <el-table-column label="类型名称" width="160">
          <template slot-scope="scope">
            {{ scope.row.deviceTypeName }}
          </template>
        </el-table-column>
        <el-table-column label="类型编码" width="170">
          <template slot-scope="scope">
            {{ scope.row.deviceTypeCode }}
          </template>
        </el-table-column>
        <el-table-column label="所属组织" width="110">
          <template slot-scope="scope">
            {{ scope.row.organName }}
          </template>
        </el-table-column>
        <!--         <el-table-column label="所属组织路径" width="110">
          <template slot-scope="scope">
            {{ scope.row.organPath }}
          </template>
        </el-table-column> -->
        <el-table-column label="上级权限编号" width="170">
          <template slot-scope="scope">
            {{ scope.row.parentId }}
          </template>
        </el-table-column>
        <el-table-column label="是否可被引用" width="110" prop="enable" :formatter="isQuoteFormat" />
        <!--   <el-table-column label="更新日期" width="160">
          <template slot-scope="scope">
            {{ scope.row.updateDate }}
          </template>
        </el-table-column> -->
        <el-table-column label="备注" width="110">
          <template slot-scope="scope">
            {{ scope.row.remark }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="created_at" label="操作" width="400">
          <template slot-scope="scope">
            <span v-if="!scope.row.isSet" v-has="'DEVICE_TYPE_ADD_CHILDREN'" class="el-tag el-tag--success el-tag--mini" style="cursor: pointer;" @click="handleAddChildren(scope.$index, scope.row)">
              添加类型
            </span>
            <span v-if="!scope.row.isSet" v-has="'DEVICEAISLETEMPLATE_LIST'"  class="el-tag el-tag--success el-tag--mini" style="cursor: pointer;" @click="queryAisleTemplate(scope.$index, scope.row)">
              货道模板信息
            </span>
            <span class="el-tag el-tag--info el-tag--mini" v-has="'DEVICE_TYPE_EDIT'" style="cursor: pointer;" @click="handleEdit(scope.$index, scope.row)">
              修改
            </span>
            <span v-if="!scope.row.isSet" v-has="'DEVICE_TYPE_DEL'" class="el-tag el-tag--danger el-tag--mini" style="cursor: pointer;" @click="handleDelete(scope.$index, scope.row)">
              删除
            </span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="block">
      <el-pagination :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
    <div class="block">
      <!--弹框-->
      <el-dialog :title="titleMap[dialogStatus]" :visible.sync="dialogFormVisible">
        <el-form :model="form" :rules="deviceTypeRules" ref="deviceForm">
          <el-form-item label="类型名称" prop="deviceTypeName">
            <el-input v-model="form.deviceTypeName" placeholder="" auto-complete="off" />
          </el-form-item>
          <el-form-item label="类型编码" prop="deviceTypeCode">
            <el-input v-model="form.deviceTypeCode" placeholder="" auto-complete="off" />
          </el-form-item>
          <el-form-item label="是否可被引用">
            <el-select v-model="form.isQuote" clearable placeholder="是否可被引用" style="width:100%">
              <el-option v-for="item in query.isQuoteOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="form.remark" placeholder="" auto-complete="off" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button v-preventReClick type="primary" @click="handleEditSave('deviceForm')">确 定</el-button>
        </div>
      </el-dialog>
      <!--货道信息弹框-->
      <el-dialog title="货道模板信息" :visible.sync="dialogFormVisibleAisleTemplate">
        <div class="filter-container">
          <div style="display:inline-block;font-size:15px;"></div>
          <el-input clearable @keyup.enter.native="handleFilter" v-model="aisleTemplateQuery.params.name" style="width: 200px;margin-right:15px;margin-top:7px" class="filter-item" placeholder="模板名称" />
          <div style="display:inline-block;font-size:15px;"></div>
          <el-button v-has="'DEVICEAISLETEMPLATE_LIST'" class="filter-item" size="mini" type="primary" v-waves style="margin-top:8px;" icon="el-icon-search" @click="aisleTemplateSelect">搜索</el-button>
          <el-button v-has="'DEVICEAISLETEMPLATE_ADD'" class="filter-item" size="mini" type="success" v-waves style="margin-top:8px;" icon="el-icon-plus" @click="handleAddAisleTemplate">新增货道模板</el-button>
        </div>
        <!-- table 表格 -->
        <el-table :data="aisleTemplateList" v-loading="aisleTemplateLoading" row-key="index" element-loading-text="给我一点时间" border fit highlight-current-row height="475" style="width: 100%">
          <el-table-column label="模板名称" prop="name" align="center" />
          <el-table-column label="备注" prop="desc" align="center" />
          <el-table-column align="center" prop="created_at" label="操作" width="250">
            <template slot-scope="scope">
              <span class="el-tag el-tag--primary el-tag--mini" v-has="'DEVICEAISLETEMPLATE_APPLY'" style="cursor: pointer;" @click="toApplyTemplaye(scope.$index, scope.row)">
                应用
              </span>
              <span class="el-tag el-tag--success el-tag--mini" v-has="'DEVICEAISLETEMPLATEITEM_LIST'" style="cursor: pointer;" @click="queryGoodsTemplate(scope.$index, scope.row)">
                商品模板
              </span>
              <span class="el-tag el-tag--info el-tag--mini" v-has="'DEVICEAISLETEMPLATE_EDIT'" style="cursor: pointer;" @click="handleEditAisleTemplate(scope.$index, scope.row)">
                修改
              </span>
              <span v-if="!scope.row.isSet" v-has="'DEVICEAISLETEMPLATE_DEL'" class="el-tag el-tag--danger el-tag--mini" style="cursor: pointer;" @click="handleAisleTemplateDelete(scope.$index, scope.row)">
                删除
              </span>
            </template>
          </el-table-column>
        </el-table>
        <!-- pagination 分页 -->
        <div class="pagination-container">
          <el-pagination background 
          @size-change="aisleTemplatehandleSizeChange" 
          @current-change="aisleTemplatehandleCurrentChange" 
          :current-page="aisleTemplateCurrentPage" 
          :page-sizes="[5,10,20, 30, 40,1000,9999]" 
          :page-size="aisleTemplatePageSize" 
          layout="total, sizes, prev, pager, next, jumper" 
          :total="aisleTemplatetotal">
          </el-pagination>
        </div>
      </el-dialog>
      <!--新增货道信息弹框-->
      <el-dialog :title="titleMap[dialogStatus]" :visible.sync="dialogFormVisibleAisleTemplateEdit">
        <el-form :model="aisleTemplateform" :rules="aisleTemplateformRules" ref="aisleTemplateform">
          <el-form-item label="模板名称" prop="name">
            <el-input v-model="aisleTemplateform.name" placeholder="" auto-complete="off" />
          </el-form-item>
          <el-form-item label="所属组织" required>
            <SelectTree placeholder="所属组织" :props="organProps" style="width: 100%" :options="organOptionData" :clearable='false' :value="organvalueId" @getValue="getOrganValue($event)" />
          </el-form-item>
          <el-form-item label="备注">
            <el-input v-model="aisleTemplateform.desc" placeholder="" auto-complete="off" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibleAisleTemplateEdit = false">取 消</el-button>
          <el-button v-preventReClick type="primary" @click="handleAisleTemplateEditSave('aisleTemplateform')">确 定</el-button>
        </div>
      </el-dialog>
      <!--商品模板信息弹框-->
      <el-dialog title="商品模板信息" :visible.sync="dialogFormVisibleGoodsTemplate" width="85%">
        <div class="filter-container">
          <!--    <div style="display:inline-block;font-size:15px;"></div>
          <el-input clearable @keyup.enter.native="handleFilter" v-model="goodsTemplateQuery.params.name" style="width: 200px;margin-right:15px;margin-top:7px" class="filter-item" placeholder="模板名称" /> -->
          <!--    <div style="display:inline-block;font-size:15px;"></div>
          <el-button class="filter-item" type="primary" v-waves style="margin-top:8px;" icon="el-icon-search" @click="goodsTemplateSelect">搜索</el-button> -->
          <el-button class="filter-item" v-has="'DEVICEAISLETEMPLATEITEM_ADD'" size="mini" type="success" v-waves style="margin-top:8px;" icon="el-icon-plus" @click="handleAddGoodsTemplate">新增商品模板</el-button>
        </div>
        <!-- table 表格 -->
        <el-table :data="goodsTemplateList" v-loading="goodsTemplateLoading" row-key="index" element-loading-text="给我一点时间" border fit highlight-current-row height="475" style="width: 100%">
          <el-table-column label="货道名称" prop="aisleName" align="center" />
          <el-table-column label="商品名称" prop="goodsName" align="center" />
          <el-table-column label="商品图片" prop="goodsImg" align="center" width="150">
            <template slot-scope="scope">
              <img :src="scope.row.goodsImg" min-width="100" height="100"  @click="onPreview(scope.row.goodsImg)"/>
            </template>
          </el-table-column>
          <el-table-column label="商品规格" prop="goodsSpec" align="center" />
          <el-table-column label="单价 (元)" prop="goodsPrice" align="center" >
            <template slot-scope="scope">
            {{ scope.row.goodsPrice/100 }}
          </template>
          </el-table-column>
          <el-table-column label="折扣价 (元)" prop="goodsDiscountPrice" align="center"  >
           <template slot-scope="scope">
            {{ scope.row.goodsDiscountPrice/100 }}
          </template>
          </el-table-column>
          <el-table-column label="成本价 (元)" prop="goodsCost" align="center" >
           <template slot-scope="scope">
            {{ scope.row.goodsCost/100 }}
          </template>
         </el-table-column>
          <el-table-column label="库存" prop="printCount" align="center" />
          <el-table-column label="商品产地" prop="goodsProductPlace" align="center" />
          <el-table-column label="是否热销" prop="isHot" align="center" :formatter="isHot" />
          <el-table-column label="控制版号" prop="ctrlBoard" align="center" />
          <el-table-column label="控制指令" prop="ctrlCmd" align="center" />
          <el-table-column label="排序号" prop="sort" align="center" />
          <el-table-column label="状态" prop="status" align="center" :formatter="goodsAisleStatus" />
          <el-table-column align="center" prop="created_at" label="操作" width="150">
            <template slot-scope="scope">
              <span class="el-tag el-tag--info el-tag--mini" v-has="'DEVICEAISLETEMPLATEITEM_EDIT'" style="cursor: pointer;" @click="handleEditGoodsTemplate(scope.$index, scope.row)">
                修改
              </span>
              <span v-if="!scope.row.isSet" v-has="'DEVICEAISLETEMPLATEITEM_DEL'" class="el-tag el-tag--danger el-tag--mini" style="cursor: pointer;" @click="handlegoodsTemplateDelete(scope.$index, scope.row)">
                删除
              </span>
            </template>
          </el-table-column>
        </el-table>
        <!-- pagination 分页 -->
        <div class="pagination-container">
          <el-pagination background @size-change="goodsTemplatehandleSizeChange" @current-change="goodsTemplatehandleCurrentChange" :current-page="goodsTemplateCurrentPage" :page-sizes="[5,10,20, 30, 40,1000,9999]" :page-size="goodsTemplatePageSize" layout="total, sizes, prev, pager, next, jumper" :total="goodsTemplatetotal">
          </el-pagination>
        </div>
      </el-dialog>
      <!--新增商品模板弹框-->
      <el-dialog :title="titleMap[dialogStatus]" :visible.sync="dialogFormVisibleGoodsTemplateEdit" :close-on-click-modal='false' width="50%">
        <el-form :model="goodsTemplateform" :rules="goodsTemplateRules" ref="goodsTemplateform" :inline="true" label-width="170px" align="center">
          <el-form-item label="货道名称" prop="aisleName">
            <el-input v-model="goodsTemplateform.aisleName" placeholder="货道名称" auto-complete="off" suffix-icon="xxxx" />
          </el-form-item>
          <el-form-item label="商品名称" prop="goodsName">
            <el-input v-model="goodsTemplateform.goodsName" size="mini" placeholder="商品名称" :disabled='true' auto-complete="off" @focus="inputImg">
              <el-button v-has="'GOODSPRICE_LIST'"  slot="append" size="mini" ttype="success" icon="el-icon-plus" @click="inputImg"></el-button>
            </el-input>
          </el-form-item>
          <el-form-item label="单价 (元)" prop="goodsPrice">
            <el-input v-model="goodsTemplateform.goodsPrice" placeholder="单价" auto-complete="off" suffix-icon="xxxx"  type="number"/>
          </el-form-item>
          <el-form-item label="成本价 (元)" prop="goodsCost">
            <el-input v-model="goodsTemplateform.goodsCost" placeholder="成本价" auto-complete="off" suffix-icon="xxxx"  type="number" />
          </el-form-item>
          <el-form-item label="折扣价 (元)" prop="goodsDiscountPrice">
            <el-input v-model="goodsTemplateform.goodsDiscountPrice" placeholder="折扣价" auto-complete="off" suffix-icon="xxxx"  type="number"/>
          </el-form-item>
          <el-form-item label="最低价 (元)" prop="basePrice">
            <el-input v-model="goodsTemplateform.basePrice" placeholder="最低价" auto-complete="off" suffix-icon="xxxx" type="number" />
          </el-form-item>
          <el-form-item label="货道容量" prop="printCount">
            <el-input v-model="goodsTemplateform.printCount" placeholder="货道容量" auto-complete="off" suffix-icon="xxxx"  type="number"/>
          </el-form-item>
          <el-form-item label="商品规格" prop="goodsSpec">
            <el-input v-model="goodsTemplateform.goodsSpec" placeholder="商品规格" auto-complete="off" suffix-icon="xxxx"  type="number"/>
          </el-form-item>
          <el-form-item label="是否热销" prop="isHot">
            <el-select v-model="goodsTemplateform.isHot" placeholder="是否热销">
              <el-option v-for="item in isHotOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="货道状态" prop="status">
            <el-select v-model="goodsTemplateform.status" placeholder="货道状态">
              <el-option v-for="item in goodsAisleStatusOptions" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="控制版号" prop="ctrlBoard">
            <el-input v-model="goodsTemplateform.ctrlBoard" placeholder="控制版号" auto-complete="off" suffix-icon="xxxx" />
          </el-form-item>
          </el-form-item>
          <el-form-item label="控制指令" prop="ctrlCmd">
            <el-input v-model="goodsTemplateform.ctrlCmd" placeholder="控制指令" auto-complete="off" suffix-icon="xxxx" />
          </el-form-item>
          <el-form-item label="排序号" prop="sort">
            <el-input v-model="goodsTemplateform.sort" placeholder="排序号" auto-complete="off" suffix-icon="xxxx" type="number" />
          </el-form-item>
          <el-form-item label="商品图片" prop="goodsImg">
            <img :src="goodsTemplateform.goodsImg" width="200" height="200" @click="onPreview(goodsTemplateform.goodsImg)"/>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisibleGoodsTemplateEdit = false">取 消</el-button>
          <el-button type="primary" :loading="goodsTemplateEditButton" @click="handleGoodsTemplateEditSave('goodsTemplateform')">确 定</el-button>
        </div>
      </el-dialog>
      <!--查询商品弹框-->
      <el-dialog title="商品库" :visible.sync="dialogFormVisibleGoodsStock" width="60%">
        <div class="filter-container">
          <div style="display:inline-block;font-size:15px;"></div>
          <el-input clearable @keyup.enter.native="handleFilter" v-model="goodsStock.params.goodsName" style="width: 200px;margin-right:15px;margin-top:7px" class="filter-item" placeholder="商品名称" />
          <div style="display:inline-block;font-size:15px;"></div>
          <el-button class="filter-item" type="primary" v-waves style="margin-top:8px;" size="mini" icon="el-icon-search" @click="goodsStockSelect">搜索</el-button>
          <!--   <el-button class="filter-item" type="success" v-waves style="margin-top:8px;" size="mini" icon="el-icon-plus" @click="handleAddGoodsTemplate">新增商品模板</el-button>  -->
        </div>
        <!-- table 表格 -->
        <el-table :data="goodsStockList" v-loading="goodsStockLoading" row-key="index" element-loading-text="给我一点时间" border fit highlight-current-row height="475" style="width: 100%">
          <el-table-column label="商品名称" prop="goodsName" align="center" />
          <el-table-column label="商品图片" prop="goodsImg" align="center">
            <template slot-scope="scope">
              <img :src="scope.row.goodsImg" min-width="100" height="100" @click="onPreview(scope.row.goodsImg)"/>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="created_at" label="操作" width="150">
            <template slot-scope="scope">
              <el-button type="success" icon="el-icon-check" size="mini" @click="selectGoods(scope.$index, scope.row)">选中</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- pagination 分页 -->
        <div class="pagination-container">
          <el-pagination background @size-change="goodsStockhandleSizeChange" @current-change="goodsStockhandleCurrentChange" :current-page="goodsStockCurrentPage" :page-sizes="[5,10,20, 30, 40,1000,9999]" :page-size="goodsStockPageSize" layout="total, sizes, prev, pager, next, jumper" :total="goodsStocktotal">
          </el-pagination>
        </div>
      </el-dialog>
      <!--查询设备列表弹框-->
      <el-dialog title="设备列表" :visible.sync="dialogFormVisibleDevice" width="40%">
        <div class="filter-container">
          <!--    <div style="display:inline-block;font-size:15px;"></div>
          <el-input clearable @keyup.enter.native="handleFilter" v-model="goodsTemplateQuery.params.name" style="width: 200px;margin-right:15px;margin-top:7px" class="filter-item" placeholder="模板名称" /> -->
          <!--    <div style="display:inline-block;font-size:15px;"></div>
          <el-button class="filter-item" type="primary" v-waves style="margin-top:8px;" icon="el-icon-search" @click="goodsTemplateSelect">搜索</el-button> -->
          <!--      <el-button class="filter-item" type="success" v-waves style="margin-top:8px;" icon="el-icon-plus" @click="handleAddGoodsTemplate">新增商品模板</el-button> -->
        </div>
        <!-- table 表格 -->
        <el-table :data="deviceList" v-loading="deviceLoading" row-key="index" element-loading-text="给我一点时间" border fit highlight-current-row height="375" ref="multipleTable" @select="selectDevTable" 
        @select-all="selectDevAllTable" @selection-change="handleSelectionChange" style="width: 100%">
          <el-table-column label="序号" prop="index" align="center" type="selection" />
          <el-table-column label="设备编号" prop="deviceCode" align="center" />
          <el-table-column label="设备名称" prop="deviceName" align="center" />
        </el-table>
        <div slot="footer" class="dialog-footer">
          <el-button type="danger" :loading="doApplyTemplateButton" @click="doApplyTemplate()">确定</el-button>
        </div>
        <!-- pagination 分页 -->
        <div class="pagination-container">
          <el-pagination background 
          @size-change="devicehandleSizeChange" 
          @current-change="devicehandleCurrentChange" 
          :current-page="deviceCurrentPage" 
          :page-sizes="[5,10,20, 30, 40,1000,9999]" 
          :page-size="devicePageSize" 
          layout="total, sizes, prev, pager, next, jumper" 
          :total="devicetotal">
          </el-pagination>
        </div>
      </el-dialog>


<!-- 图片预览 -->
      <div>
        <el-button @click="onPreview">预览</el-button>
        <el-image-viewer 
                     v-if="showViewer" 
                     z-index='99999'
                     :on-close="closeViewer" 
                     :url-list="[PreviewUrl]" />
    </div>

    </div>
  </div>
  </div>
</template>
<script>
   // 导入组件
    import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
    
import { querySubordinateOrgan } from '@/api/Organ'
import { getList, doDelete, doEdit, getDeviceAisleTemplateList, aisleTemplateDoEdit, aisleTemplatedoDelete, getDeviceGoodsTemplateList, goodsTemplateDoEdit, goodsTemplatedoDelete, getDevicetList, applyTemplate, getGoodsPriceList } from '@/api/deviceType/'
import { queryDeviceList } from '@/api/device/'
import { getOrganId, getOrganPath, handleBuildTreeDataStruct } from '@/api/utils'
import { getDictionaryGroup } from '@/api/dictionary'
import preventReClick from '@/utils/preventReClick' //防多次点击，重复提交
import SelectTree from '@/components/TreeSelect/index.vue'
export default {
  components: {
    SelectTree,ElImageViewer
  },
  data() {
    return {
      showViewer: false, // 显示查看器
      PreviewUrl:'',

      goodsStock: { params: { organId: '', quote: '1', goodsName: '' }, },
      goodsStockCurrentPage: 1,
      goodsStockPageSize: 10,
      goodsStocktotal: 0,
      goodsStockLoading: true,
      goodsStockList: null,


      deviceIds: '',
      templateId: '',
      doApplyTemplateButton: false,
      devArray: null,

      dialogFormVisibleDevice: false,
      deviceCurrentPage: 1,
      devicePageSize: 10,
      devicetotal: 0,
      deviceLoading: true,
      deviceList: [],
      deviceQuery: { params: { organPath: '' }, },

      dialogFormVisibleGoodsStock: false,


      isHotOptions: [],
      goodsAisleStatusOptions: [],
      goodsTemplateRules: {
        aisleName: [{ required: true, message: '不能为空', trigger: 'blur' },

        ],
        goodsName: [{ required: true, message: '不能为空', trigger: 'blur' },

        ],
        goodsPrice: [{ required: true, message: '不能为空', trigger: 'blur' },

        ],
        goodsCost: [{ required: true, message: '不能为空', trigger: 'blur' },

        ],
        goodsDiscountPrice: [{ required: true, message: '不能为空', trigger: 'blur' },

        ],
        basePrice: [{ required: true, message: '不能为空', trigger: 'blur' },

        ],
        printCount: [{ required: true, message: '不能为空', trigger: 'blur' },

        ],
        goodsSpec: [{ required: true, message: '不能为空', trigger: 'blur' },

        ],
        isHot: [{ required: true, message: '不能为空', trigger: 'blur' },

        ],
        status: [{ required: true, message: '不能为空', trigger: 'blur' },

        ],
        ctrlBoard: [{ required: true, message: '不能为空', trigger: 'blur' },

        ],
        ctrlCmd: [{ required: true, message: '不能为空', trigger: 'blur' },

        ],
        goodsImg: [{ required: true, message: '不能为空', trigger: 'blur' },

        ]
      },
      goodsTemplateEditButton: false,
      dialogFormVisibleGoodsTemplateEdit: false,
      goodsTemplate: null,
      goodsTemplateCurrentPage: 1,
      goodsTemplatePageSize: 10,
      goodsTemplatetotal: 0,
      goodsTemplateLoading: true,
      goodsTemplateList: null,
      dialogFormVisibleGoodsTemplate: false,
      goodsTemplateQuery: { params: { templateId: '' } },
      goodsTemplateform: {
        id: '',
        aisleName: '',
        goodsId: '',
        organPath: '',
        status: '',
        isHot: '',
        goodsName: '',
        goodsPrice: '',
        goodsCost: '',
        goodsDiscountPrice: '',
        basePrice: '',
        printCount: '',
        goodsSpec: '',
        ctrlBoard: '',
        ctrlCmd: '',
        goodsImg: '',
        sort: '',


      },

      organvalueId: {},

      dialogFormVisibleAisleTemplateEdit: false,
      aisleTemplateform: {
        id: '',
        name: '',
        organId: '',
        organPath: '',
        deviceTypeId: '',
        desc: '',

      },
      aisleTemplateformRules: {
        name: [{ required: true, message: '不能为空', trigger: 'blur' },

        ]

      },

      aisleTemplate: null,
      aisleTemplateCurrentPage: 1,
      aisleTemplatePageSize: 10,
      aisleTemplatetotal: 0,
      aisleTemplateLoading: true,
      aisleTemplateList: null,
      dialogFormVisibleAisleTemplate: false,
      aisleTemplateQuery: { params: { organPath: '', name: '', deviceTypeId: '' }, },
      props: { // 配置项（必选）
        value: 'deviceTypeCode',
        label: 'deviceTypeName',
        children: 'children',
        title: '组织'
        // disabled:true
      },
      isClearable: true, // 可清空（可选）
      isAccordion: true, // 可收起（可选）
      organProps: { // 配置项（必选）
        value: 'id',
        label: 'organName',
        children: 'children',
        title: '组织',
        disabled: false
      },
      organOptionData: [],
      optionData: [],
      list: null,
      listLoading: true,
      total: 5,
      currentPage: 1,
      pageSize: 10,
      dialogFormVisible: false,
      addForVisible: false,
      form: {
        id: '',
        deviceTypeName: '',
        deviceTypeCode: '',
        organId: '',
        organPath: '',
        remark: '',
        'id': '',
        isQuote: '',
      },
      deviceTypeRules: {
        deviceTypeName: [{ required: true, message: '请输入类型名称', trigger: 'blur' },

        ],
        deviceTypeCode: [{ required: true, message: '请输入类型编码', trigger: 'blur' }, ]
      },
      // 新增or编辑弹框标题(根据点击的新增or编辑按钮显示不同的标题)
      titleMap: {
        add: '新增',
        edit: '编辑'
      },
      // 新增和编辑弹框标题
      dialogStatus: '',
      query: {
        params: {
          id: '', //
          deviceTypeName: '',
          deviceTypeCode: '',
          organId: '', //
          organPath: '' //                           
        },
        timeValue: '',
        isQuoteOptions: [{
          value: 1,
          label: '是'
        }, {
          value: 0,
          label: '否'
        }],
        value: ''
      }
    }
  },
  created() {
    this.fetchData()
    this.initOrganTree();
    this.initDeviceTypeTree();
    this.handleBuildGoodsAisleStatusOptions();
    this.handleBuildIsHotOptions();
  },
  methods: {



    //格式化显示金额（元），数据库返回为分
    toYuan(aount){
      aount=aount/100;
      return aount;

    },

    onPreview(goodsImg) {
      console.log('===============goodsImg'+goodsImg);

          this.PreviewUrl=goodsImg;
          this.showViewer = true
        },
        // 关闭查看器
        closeViewer() {
          this.showViewer = false
        },
    //应用模板
    doApplyTemplate() {

      this.deviceIds = '';
      for (var i = 0; i < this.devArray.length; i++) {

        this.deviceIds += this.devArray[i].id + ',';

      }

      console.log(this.deviceIds);

      if (this.devArray == null || this.devArray.length == 0) {
        this.$message({
          type: 'warning',
          message: `请选择设备!`
        })
      } else {


        this.$confirm('是否确定应用?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          this.doApplyTemplateButton = true;
          applyTemplate({
            deviceIds: this.deviceIds,
            templateId: this.templateId,
            organId: getOrganId(),
            organPath: getOrganPath(),
          }).then(response => {
            const data = response.data
            console.log(data)
            if (data.status) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
              this.dialogFormVisibleDevice = false;
            } else if (data.status == 403) {
              this.$message({
                type: 'warning',
                message: data.description
              })
            } else {
              this.$message({
                type: 'info',
                message: '操作失败!'
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          })
        })

      }

    },

    //保存选中记录
    selectDevTable(selection, row) {
      this.devArray = selection;
    },
    //保存所有选中记录
    selectDevAllTable(selection) {
      this.devArray = selection;
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    fetchDeviceData() {
      if (!this.deviceQuery.params.organPath) {
        this.deviceQuery.params.organPath = getOrganPath()
      }
      this.goodsTemplateLoading = true
      getDevicetList(this.deviceQuery.params, this.deviceCurrentPage, this.devicePageSize).then(response => {
        const data = response.data
        this.devicetotal = data.totalCount
        this.devicePageSize = data.pageSize
        this.deviceCurrentPage = data.currentPage
        this.deviceList = data.entities
        this.deviceLoading = false
      })
    },


    toApplyTemplaye(index, row) {
      this.templateId = row.id
      this.dialogFormVisibleDevice = true;
      this.doApplyTemplateButton = false;
      this.fetchDeviceData();
    },


    goodsStockSelect() {

      this.fetchgoodsStockData();
    },


    fetchgoodsStockData() {
      if (!this.goodsStock.params.organId) {
        this.goodsStock.params.organId = getOrganId()
      }
      this.goodsStockLoading = true
      getGoodsPriceList(this.goodsStock.params, this.goodsStockCurrentPage, this.goodsStockPageSize).then(response => {
        const data = response.data
        this.goodsStocktotal = data.totalCount
        this.goodsStockPageSize = data.pageSize
        this.goodsStockCurrentPage = data.currentPage
        this.goodsStockList = data.entities
        this.goodsStockLoading = false
      })
    },

   goodsStockhandleSizeChange(val) {
      this.goodsStockCurrentPage = 1
      this.goodsStockPageSize = val
      this.fetchgoodsStockData()

    },
     goodsStockhandleCurrentChange(val) {
      this.goodsStockCurrentPage = val
      this.fetchgoodsStockData()


    },


    selectGoods(index, row) {
      this.goodsTemplateform.goodsId = row.goodsId
      this.goodsTemplateform.goodsName = row.goodsName
      this.goodsTemplateform.goodsPrice = row.price/100
      this.goodsTemplateform.goodsCost = row.costPrice/100
      this.goodsTemplateform.basePrice = row.basePrice/100
      this.goodsTemplateform.goodsDiscountPrice = row.discountPrice/100
      this.goodsTemplateform.printCount = row.printCount
      this.goodsTemplateform.goodsSpec = row.goodsSpec
      this.goodsTemplateform.goodsProductPlace = row.productionPlace
      this.goodsTemplateform.goodsImg = row.goodsImg
      this.goodsTemplateform.goodsSpec = row.unitValue
      this.dialogFormVisibleGoodsStock = false;

    },

    inputImg(item) {
      this.goodsStock.params.goodsName='';
      this.dialogFormVisibleGoodsStock = true;
      this.goodsStockPageSize = 10
      this.goodsStockCurrentPage = 1
      this.fetchgoodsStockData();

    },

    handleBuildIsHotOptions() {
      getDictionaryGroup({ sys: 1, bigType: "isHot", organId: getOrganId() }).then(response => {
        const data = response.data
        let isHotOptions = [];
        for (let i = 0; i < data.length; i++) {

          let option = {}
          option['value'] = data[i].value
          option['label'] = data[i].desc
          isHotOptions.push(option)
        }
        this.isHotOptions = isHotOptions
      })

    },

    isHot(row, column) {
      let label = ''
      for (let i = 0; i < this.isHotOptions.length; i++) {
        if ('' + row.isHot === this.isHotOptions[i].value) {
          return this.isHotOptions[i].label
        }

      }
      return label

    },

    handleBuildGoodsAisleStatusOptions() {
      getDictionaryGroup({ sys: 1, bigType: "GoodsAisleStatus", organId: getOrganId() }).then(response => {
        const data = response.data
        let goodsAisleStatusOptions = [];
        for (let i = 0; i < data.length; i++) {

          let option = {}
          option['value'] = data[i].value
          option['label'] = data[i].desc
          goodsAisleStatusOptions.push(option)
        }
        this.goodsAisleStatusOptions = goodsAisleStatusOptions
      })

    },
    goodsAisleStatus(row, column) {
      let label = ''
      for (let i = 0; i < this.goodsAisleStatusOptions.length; i++) {
        if ('' + row.status === this.goodsAisleStatusOptions[i].value) {
          return this.goodsAisleStatusOptions[i].label
        }

      }
      return label

    },

    handlegoodsTemplateDelete(index, row) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        goodsTemplatedoDelete(row.id).then(response => {
          const data = response.data
          console.log(data)
          if (data.status == 1) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            this.fetchDeviceGoodsTemplateData();
          } else if (data.status == 403) {
            this.$message({
              type: 'warning',
              message: data.description
            })
          } else {
            this.$message({
              type: 'info',
              message: '操作失败!'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    handleGoodsTemplateEditSave(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
       this.goodsTemplateform.goodsPrice = this.goodsTemplateform.goodsPrice*100
       this.goodsTemplateform.goodsCost = this.goodsTemplateform.goodsCost*100
       this.goodsTemplateform.goodsDiscountPrice =  this.goodsTemplateform.goodsDiscountPrice*100
       this.goodsTemplateform.basePrice = this.goodsTemplateform.basePrice*100
       this.goodsTemplateEditButton=true;
          goodsTemplateDoEdit(this.goodsTemplateform).then(response => {
            debugger
            console.log(response)
            const data = response.data
            if (data.status) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
              this.fetchDeviceGoodsTemplateData();
            } else {
              this.$message({
                type: 'info',
                message: '操作失败!'
              })
            }
            this.goodsTemplateEditButton=false;
            this.goodsTemplateLoading = false
            this.dialogFormVisibleGoodsTemplateEdit = false
          })
        } else {
          console.log('error submit!!');
          return false;
        }

      })

    },


    //点击查看商品货道信息
    queryGoodsTemplate(index, row) {
      this.aisleTemplate = row;
      this.goodsTemplateform.templateId = row.id;
      this.goodsTemplateQuery.params.templateId = row.id;
      this.fetchDeviceGoodsTemplateData();
      this.dialogFormVisibleGoodsTemplate = true;
    },

    goodsTemplatehandleSizeChange(val) {
      this.goodsTemplateCurrentPage = 1
      this.goodsTemplatePageSize = val
      this.fetchDeviceGoodsTemplateData()

    },
    goodsTemplatehandleCurrentChange(val) {
      this.goodsTemplateCurrentPage = val
      this.fetchDeviceGoodsTemplateData()

    },

    // 商品模板新增
    handleAddGoodsTemplate() {
      // 显示弹框
      this.dialogFormVisibleGoodsTemplateEdit = true
      this.goodsTemplateEditButton=false;
      this.goodsTemplateform.id = '';
      this.goodsTemplateform.organId = this.aisleTemplate.organId;
      this.goodsTemplateform.organPath = this.aisleTemplate.organPath
      this.goodsTemplateform.status = '1';
      this.goodsTemplateform.isHot = '0';
      this.goodsTemplateform.aisleName = '';
      this.goodsTemplateform.goodsName = '';
      this.goodsTemplateform.goodsPrice = '';
      this.goodsTemplateform.goodsCost = '';
      this.goodsTemplateform.goodsDiscountPrice = '';
      this.goodsTemplateform.basePrice = '';
      this.goodsTemplateform.printCount = '';
      this.goodsTemplateform.goodsSpec = '';
      this.goodsTemplateform.ctrlBoard = '';
      this.goodsTemplateform.ctrlCmd = '';
      this.goodsTemplateform.goodsImg = '';
      this.goodsTemplateform.goodsProductPlace = '';
      this.goodsTemplateform.sort = '';
      // 新增弹框标题
      this.dialogStatus = 'add'


    },

    //商品模板编辑
    handleEditGoodsTemplate(index, row) {
      this.goodsTemplateEditButton=false;
      this.goodsTemplateform.id = row.id
      this.goodsTemplateform.aisleName = row.aisleName
      this.goodsTemplateform.goodsName = row.goodsName
      this.goodsTemplateform.goodsPrice = row.goodsPrice/100
      this.goodsTemplateform.goodsCost = row.goodsCost/100
      this.goodsTemplateform.goodsDiscountPrice = row.goodsDiscountPrice/100
      this.goodsTemplateform.basePrice = row.basePrice/100
      this.goodsTemplateform.printCount = row.printCount
      this.goodsTemplateform.goodsSpec = row.goodsSpec
      this.goodsTemplateform.isHot = '' + row.isHot
      this.goodsTemplateform.status = '' + row.status
      this.goodsTemplateform.ctrlBoard = row.ctrlBoard
      this.goodsTemplateform.ctrlCmd = row.ctrlCmd
      this.goodsTemplateform.goodsImg = row.goodsImg
      this.goodsTemplateform.sort = row.sort
      this.goodsTemplateform.goodsProductPlace = row.goodsProductPlace
      // 显示弹框
      this.dialogFormVisibleGoodsTemplateEdit = true
      // 编辑弹框标题
      this.dialogStatus = 'edit'
    },


    fetchDeviceGoodsTemplateData() {
      this.goodsTemplateLoading = true
      getDeviceGoodsTemplateList(this.goodsTemplateQuery.params, this.goodsTemplateCurrentPage, this.goodsTemplatePageSize).then(response => {
        const data = response.data
        this.goodsTemplatetotal = data.totalCount
        this.goodsTemplatePageSize = data.pageSize
        this.goodsTemplateCurrentPage = data.currentPage
        this.goodsTemplateList = data.entities
        this.goodsTemplateLoading = false
      })
    },

    handleAisleTemplateDelete(index, row) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        aisleTemplatedoDelete(row.id).then(response => {
          const data = response.data
          console.log(data)
          if (data.status == 1) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            this.fetchDeviceAisleTemplateData();
          } else if (data.status == 403) {
            this.$message({
              type: 'warning',
              message: data.description
            })
          } else {
            this.$message({
              type: 'info',
              message: '操作失败!'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleAisleTemplateEditSave(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {

          if (this.aisleTemplateform.organId == null || this.aisleTemplateform.organId == '') {
            this.$message({
              type: 'warning',
              message: `请选择组织!`
            })
            return;
          }

          aisleTemplateDoEdit(this.aisleTemplateform).then(response => {
            debugger
            console.log(response)
            const data = response.data
            if (data.status) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
              this.fetchDeviceAisleTemplateData();
            } else {
              this.$message({
                type: 'info',
                message: '操作失败!'
              })
            }
            this.aisleTemplateLoading = false
            this.dialogFormVisibleAisleTemplateEdit = false
          })
        } else {
          console.log('error submit!!');
          return false;
        }

      })

    },

    getOrganValue(value) {
      this.aisleTemplateform.organId = value.id;
      this.aisleTemplateform.organPath = value.organPath;
    },
    // 模板新增
    handleAddAisleTemplate() {
      // 显示弹框
      this.dialogFormVisibleAisleTemplateEdit = true
      // 新增弹框标题
      this.dialogStatus = 'add'
      this.aisleTemplateform.name = ''
      this.aisleTemplateform.desc = ''
      this.aisleTemplateform.id = ''

    },
    // 模板编辑
    handleEditAisleTemplate(index, row) {
      this.aisleTemplateform.id = row.id
      this.aisleTemplateform.name = row.name
      this.aisleTemplateform.desc = row.desc
      this.organvalueId = row.organId
      this.aisleTemplateform.organId = row.organId;
      // 显示弹框
      this.dialogFormVisibleAisleTemplateEdit = true
      // 编辑弹框标题
      this.dialogStatus = 'edit'
    },
    fetchDeviceAisleTemplateData() {
      if (!this.aisleTemplateQuery.params.organPath) {
        this.aisleTemplateQuery.params.organPath = getOrganPath()
      }
      this.aisleTemplateLoading = true
      getDeviceAisleTemplateList(this.aisleTemplateQuery.params, this.aisleTemplateCurrentPage, this.aisleTemplatePageSize).then(response => {
        const data = response.data
        this.aisleTemplatetotal = data.totalCount
        this.aisleTemplatePageSize = data.pageSize
        this.aisleTemplateCurrentPage = data.currentPage
        this.aisleTemplateList = data.entities
        this.aisleTemplateLoading = false
      })
    },
    //点击查看货道信息
    queryAisleTemplate(index, row) {
      this.aisleTemplateform.deviceTypeId = row.id;
      this.aisleTemplateQuery.params.deviceTypeId = row.id;
      this.fetchDeviceAisleTemplateData();
      this.dialogFormVisibleAisleTemplate = true;
    },
    aisleTemplatehandleSizeChange(val) {
      this.aisleTemplateCurrentPage = 1
      this.aisleTemplatePageSize = val
      this.fetchDeviceAisleTemplateData()

    },
    aisleTemplatehandleCurrentChange(val) {
      this.aisleTemplateCurrentPage = val
      this.fetchDeviceAisleTemplateData()


    },

    //货道信息搜索
    aisleTemplateSelect() {
      this.dialogFormVisibleAisleTemplate = false;
      this.fetchDeviceAisleTemplateData();
      this.dialogFormVisibleAisleTemplate = true;

    },

    getValueSelect(value) {
      if (value == null) {
        this.query.params.deviceTypeCode = '';
      } else {
        this.valueIdSelect = value
        this.query.params.deviceTypeCode = value.deviceTypeCode
      }
    },
    initDeviceTypeTree() {
      this.listLoading = true
      queryDeviceList({ organPath: getOrganPath() }).then(response => {
        console.log(response)
        const data = response.data
        this.optionData = handleBuildTreeDataStruct(data, 'id', 'parentId')
        this.listLoading = false
      })
    },
    initOrganTree() {
      this.listLoading = true
      querySubordinateOrgan({ organPath: getOrganPath() }).then(response => {
        console.log(response)
        const data = response.data
        this.organOptionData = handleBuildTreeDataStruct(data, 'id', 'parentId')
        this.listLoading = false
      })
    },
    getValueIdSelectOrgan(value) {
      console.log(value)
      if (value == null) {
        this.query.params.organId = '';
      } else {
        this.query.params.organId = value.id;
      }
    },
    isQuoteFormat(row, column) {
      if (row.isQuote === 0) {
        return '否'
      } else if (row.isQuote === 1) {
        return '是'
      }
    },
    fetchData() {
      if (!this.query.params.organPath) {
        this.query.params.organPath = getOrganPath()
      }
      this.listLoading = true
      getList(this.query.params, this.currentPage, this.pageSize).then(response => {
        const data = response.data
        this.total = data.totalCount
        this.pageSize = data.pageSize
        this.currentPage = data.currentPage
        this.list = handleBuildTreeDataStruct(data.entities, 'id', 'parentId')
        this.listLoading = false
      })
    },
    handleSizeChange(val) {
      this.currentPage = 1
      this.pageSize = val
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.fetchData();
    },
    // 新增
    handleAdd() {
      // 显示弹框
      this.dialogFormVisible = true
      // 新增弹框标题
      this.dialogStatus = 'add'

      this.form.id = ''
      this.form.deviceTypeName = ''
      this.form.deviceTypeCode = ''
      this.form.organId = getOrganId();
      this.form.organPath = getOrganPath();
      this.addForVisible = false
      this.form.parentId = null;
      this.form.isQuote = 0;
    },
    // 编辑
    handleEdit(index, row) {
      console.log(index)
      console.log(row)
      this.form.id = row.id
      this.form.deviceTypeName = row.deviceTypeName
      this.form.deviceTypeCode = row.deviceTypeCode
      this.form.organId = row.organId
      this.form.organPath = row.organPath
      this.form.remark = row.remark
      this.form.isQuote = row.isQuote
      this.addForVisible = true
      // 显示弹框
      this.dialogFormVisible = true
      // 编辑弹框标题
      this.dialogStatus = 'edit'
    },
    // 新增子集
    handleAddChildren(index, row) {
      console.log(row)
      // 显示弹框
      this.dialogFormVisible = true
      // 新增弹框标题
      this.dialogStatus = 'add'

      this.form.id = ''
      this.form.deviceTypeName = ''
      this.form.deviceTypeCode = ''
      this.form.parentId = row.id
      this.form.organId = row.organId
      this.form.organPath = row.organPath
      this.addForVisible = false
      this.form.isQuote = 0;
    },
    handleDelete(index, row) {
      console.log(index)
      console.log(row)

      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        doDelete(row.id).then(response => {
          const data = response.data
          console.log(data)
          if (data.status == 1) {
            this.$message({
              type: 'success',
              message: '操作成功!'
            })
            this.fetchData();
          } else if (data.status == 403) {
            this.$message({
              type: 'warning',
              message: data.description
            })
          } else {
            this.$message({
              type: 'info',
              message: '操作失败!'
            })
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleEditSave(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {

          doEdit(this.form).then(response => {
            debugger
            console.log(response)
            const data = response.data
            if (data.status) {
              this.$message({
                type: 'success',
                message: '操作成功!'
              })
              this.fetchData();
            } else {
              this.$message({
                type: 'info',
                message: '操作失败!'
              })
            }
            this.listLoading = false
            this.dialogFormVisible = false
          })
        } else {
          console.log('error submit!!');
          return false;
        }

      })

    },
    handleReset() {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    devicehandleCurrentChange(val){

        this.deviceCurrentPage = val
        this.fetchDeviceData()
    },
    devicehandleSizeChange(val){
        this.deviceCurrentPage = 1
        this.devicePageSize = val
        this.fetchDeviceData()
    }
  }
}

</script>
<style>
.input-with-select .el-input-group__prepend {
  background-color: #000;
}

</style>
